<template>
	<!-- 搜索页面 -->
	<view>
		<navigation-top :isBack="isBack" :toFrom="toFrom"></navigation-top>
		
		<view class="date">
			<text>前一天</text>
			<text>11月15日</text>
			<text>后一天</text>
		</view>
		
		<view class="placeBox" v-for="item in fare" :key="item.busId" @tap="toConfirmOrder(item)">
			<view class="timeBox">{{item.departureTime}}</view>
			<view class="place">
				<view class="depart"> 
					<view class="imgBox">
						<image src="../../static/img/icon-起点.png" mode="widthFix"></image>	
					</view>
					<text>{{item.startStop}}</text>
				</view>
				<view class="depart">
					<view class="imgBox">
						<image src="../../static/img/icon-终点.png" mode="widthFix"></image>
					</view>
					<text>{{item.lastStop}}</text>
				</view>
			</view>
			
			<view class="priceBox">
				<view class="price">￥{{item.busPrice}}</view>
				<view class="people">已有25位小伙伴</view> 
				<view class="buy">购票</view>
			</view>
		</view>
	</view>
</template>

<script>
import navigationTop  from "../../components/navigationTop/navigationTop.vue"
	export default {
		data() {
			return {
				isBack:true,
				toFrom:"韩师站 — 东莞市",
				city:"",
				fare:[]
			}
		},
		onShow() {
			 this.city = uni.getStorageSync('city');
			 this.toFrom = "韩师站 — "+this.city
			this.getFareList()
		},
		components: {
			navigationTop,
		},
		methods: {
			// 获取站点列表
			async getFareList(){
				const res = await this.$myRequest({
					url:"/bus/selectBus",
					data:{
						lastStop:this.city,
						departureDay:"2023-01-01"
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded; charset=UTF-8',
					},
				})
				this.fare = res.data.data
			},
			
			toConfirmOrder(item){
				console.log(item)
				uni.navigateTo({
					url:'/pages/lockSite/lockSite?fareList='+encodeURIComponent(JSON.stringify(item))
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.date{
		height: 88rpx;
		background: #EB6A58;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
		font-size: 32rpx;
		font-family: Inter, Inter;
		text{
			width: 30%;
			text-align: center;
		}		
	}
	
	.placeBox{
		display: flex;
		height: 180rpx;
		background: #FAFAFA;
		align-items: center;
		border-bottom:1rpx solid #EB6A58;
		margin-bottom: 36rpx;
		.timeBox{
			width: 174rpx;
			height: 180rpx;
			line-height: 180rpx;
			font-size: 48rpx;
			font-family: Inter, Inter;
			font-weight: bold;
			color: #000000;
			text-align: center;
			border-right: 2rpx dashed #A8A8A8;
			margin: auto 20rpx;
			padding-right: 20rpx;
		}
		.place{
			display: flex;
			flex-direction: column;
			width: 100%;
			.depart{
				display: flex;
				font-size: 36rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-bottom: 14rpx;
				.imgBox{
					image{
						width: 32rpx;
						height: 32rpx;
						margin: auto 8rpx auto 12rpx;
					}					
				}
				
			}
		}
		.priceBox{
			justify-self: flex-end;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 174rpx;
			font-family: Inter, Inter;
			height: 180rpx;
			margin-right: 44rpx;
			margin-left: 20rpx;
			.price{
				font-size: 24rpx;				
				font-weight: bold;
				color: #EB6A58;
				margin-bottom: 12rpx;
			}
			.people{
				font-size: 16rpx;
				font-weight: 400;
				color: #989898;
				margin-bottom: 14rpx;
			}
			.buy{
				width: 120rpx;
				height:48rpx;
				background: #F7C269;
				font-size: 24rpx;
				color: #FAFAFA;
				text-align: center;
				line-height: 48rpx;
				border-radius: 69rpx;
			}
		}
	}
</style>





